<template>
  <div class="querycss">
    <div class="fsc h100" v-for="(item,index) in queryList" style="padding: 5px" :key="index">
      <div class="globalFontSize" style="color: #333333;white-space: nowrap;text-align: right;font-weight: 400;">
        {{ item.title }}</div>
      <el-select style="width: 200px;margin-left: 5px" v-if="item.type==='select'" size="default"
        v-model="item.binddata" filterable clearable placeholder="请选择">
        <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select style="width: 200px;margin-left: 5px" v-if="item.type==='select_label'" size="default"
        v-model="item.binddata" filterable clearable placeholder="请选择">
        <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.label">
        </el-option>
      </el-select>
      <el-select style="width: 200px;margin-left: 5px" v-if="item.type==='select_value'" size="default"
        v-model="item.binddata" filterable clearable placeholder="请选择">
        <el-option v-for="item in item.options" :key="item.value" :label="item.value" :value="item.value">
        </el-option>
      </el-select>
      <el-select multiple style="width: 200px;margin-left: 5px" v-if="item.type==='multiple_select'" size="default"
        v-model="item.binddata" filterable clearable placeholder="请选择">
        <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.value">
          <!-- <span style="float: left">{{ item.label }}</span>
          <span style="float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        ">{{ item.value }}</span> -->
        </el-option>
      </el-select>
      <el-select style="width: 200px;margin-left: 5px" v-if="item.type==='stateselect'" size="default"
        v-model="item.binddata" filterable clearable placeholder="请选择">
        <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-input style="width: 240px;margin-left: 5px" size="default" v-if="item.type==='input'" v-model="item.binddata" clearable
        :placeholder="item.tip ? item.tip:'请输入'" />
      <el-cascader :props="item.cascader_props" placeholder="请选择" size="default" v-if="item.type==='cascader'"
        v-model="item.binddata" :options="item.options" clearable filterable :show-all-levels="false" 
        :collapse-tags="true" :collapse-tags-tooltip="true">
        <template #default="{ node, data }">
          <span>{{ data.label }}</span>
        </template>
      </el-cascader>
      <el-date-picker
      style="margin-left: 5px"
       v-if="item.type==='startendtime'"
      v-model="item.binddata"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="YYYY-MM-DD HH:mm:ss"
      :default-time="[new Date(2000, 1, 1, 0, 0, 0),new Date(2000, 1, 1, 23, 59, 59)]">
    </el-date-picker>
      <el-date-picker v-if="item.type==='datetime'" 
      value-format="YYYY-MM-DD HH:mm:ss"
       style="width: 200px;margin-left: 5px" v-model="item.binddata" type="datetime" placeholder="选择日期" />
      <el-date-picker style="width: 200px;margin-left: 5px" size="default" v-if="item.type==='datayear'"
        v-model="item.binddata" type="year" value-format="YYYY" placeholder="请选择年度" />
      <div @click.once="setdata">
        <el-date-picker style="margin-left: 5px;width: 385px" v-if="item.type==='datetimerange'" v-model="item.binddata"
          type="datetimerange" size="default"
          :default-time="[new Date(2000, 1, 1, 0, 0, 0),new Date(2000, 1, 1, 23, 59, 59)]" :shortcuts="[
          {
            text: '1天前',
            value: () => {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              return [start, end]
            },
          },
          {
            text: '7天前',
            value: () => {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              return [start, end]
            },
          },
          {
            text: '30天前',
            value: () => {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            },
          },
          ]" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间">
        </el-date-picker>
      </div>
    </div>
    <el-button  @click="btnclick(1)" style="margin-left:15px;width: 70px;text-align: right" size="default"
      type="primary">查询</el-button>
    <el-button  @click="btnclick(2)" style="margin-left:15px;width: 70px;text-align: right;background-color:#f2f4f5;border:none;" size="default"
       >重置</el-button>
  </div>
</template>
<script>
  import {
    reactive
  } from "vue";
  import {
    useStore
  } from "vuex";
  import {
    useRouter
  } from "vue-router";
  // import {
  //   shishiyemian
  // } from "@/assets/yemianfenlei";

  export default {
    name: "querybox",
    props: {
      queryList: {
        default: () => [],
      },
      hidequxian: {
        default: () => false,
        type: Boolean
      },
      endException: {
        default: () => false,
        type: Boolean
      },
    },
    setup(props, {
      emit
    }) {
      const router = useRouter()
      const store = useStore()
      let state = reactive({})

      function btnclick(type) {
        if (type === 1) {
          emit('query')
        }
        if (type === 2) {
          props.queryList.forEach(item=>{
            item.binddata=''
          })
          emit('query')
        }
        if(type === 2){
          emit('endException1')
        }
      }

      function setdata() {
        let element = document.querySelector('button.el-picker-panel__icon-btn.arrow-left')
        if (element) element.click()
      }
        // function pickerOptions(time) {
        //   return time.getTime() < new Date() - 7 * 24 * 60 * 60 * 1000 || time.getTime() > new Date().getTime() + 7 * 24 * 60 * 60 * 1000;
        // }
      return {
        store,
        state,
        btnclick,
        setdata,
        router,
        // shishiyemian,
        // pickerOptions
      }
    }
  }
</script>
<style lang="scss">
  .querycss {
    // background: #F3F3F3;
    // border: 1px solid #E7E7E7;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 7px;

    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 8px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 8px;
    }

    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #C7C9CC;
    }

    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background: #ffffff;
    }

    //.el-range-separator {
    //  color: white;
    //}
    //.el-range-input {
    //  background: transparent;
    //  color: white;
    //}
  }
</style>